<template>
  <!-- 导航按钮 -->
  <view class="category">
    <navigator
      class="category-item"
      hover-class="none"
      v-for="item in list"
      :key="item.id"
      :open-type="item.pageStatus"
      :url="item.url"
    >
      <image class="imageItem" :src="item.icon"> </image>
      <Text class="text">{{ item.name }}</Text>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CategoryItem } from '@/types/index/home'
defineProps<{ list: CategoryItem[] }>()
</script>

<style scoped lang="scss">
.category {
  margin: 20rpx;
  height: 230rpx;
  display: flex;
  flex-wrap: wrap;

  .text {
    display: block;
    padding-top: 5rpx;
    color: #036eb8;
    margin-top: 15rpx;
  }

  .category-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 50%;
    justify-content: center;
    align-content: center;
    text-align: center;
    margin-top: 40rpx;

    .imageItem {
      display: block;
      width: 64rpx;
      border-radius: 50%;
      margin: 0 auto;
      box-shadow: 2rpx 2rpx 2rpx 2rpx #ececec;
    }
  }
}
</style>
